
<span style="font-size:14px;">
<span style="font-size:14px;">
<span style="font-size:14px;">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>交互式录播器</title>
<style>
.menu {width:100%; background:#00BFFF; height:45px; font-size:25px; font-family: "微软雅黑";}
.menu ul {padding:0px; list-style-type:none;}
.menu ul li {float:left; width:300px; height:45px; line-height:45px; text-align:center;}
.menu ul li a {text-decoration:none; color:#000000; display:block;}
.menu ul li a:hover {background:#fff; color:#000000;}
.menu ul li a:active {background:#fff; color:#000000;}
.menu ul li a:focus {background:#fff; color:#000000;}
</style>
</head>
<body  background=" 123.jpg">
<div class="menu"align="center">
  <ul>
    <li><a href="#">交互式录播器</a></li>
    <li><a href="左侧菜单.html">课程学习</a></li>
    <li><a href="播放.html">课前预习</a></li>
    <li><a href="https://www.w3school.com.cn/">课堂学习</a></li>
    <li><a href="录音，音频.html">课后提问</a></li>
    <li><a href="音频录制.html">用户反馈</a></li>
  </ul>
</div>
</body>
</html></span></span></span>
<!DOCTYPE html> 
<html>
<head>
<title>课程学习</title>
<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<!-- CSS代码 -->
 
<style>
.menu_list {
width: 300px;
margin: 0;
}
 
.menu_head {
height: 60px;
line-height:60px;
padding-left: 50px;
font-size: 20px;
color: #525252;
cursor: pointer;
border: 1px solid #f1f1f1;
position: relative;
margin: 0px;
font-weight: bold;
background: #51a9f18c;
}
 
.menu_list .current {
background: #51a9f18c;
}
 
.menu_nva {
line-height:50px;
border-left: 1px solid #51a9f18c;
backguound:123.jpg;
border-right: 1px solid #51a9f18c;
}
 
.menu_nva a {
display: block;
height: 50px;
line-height: 50px;
padding-left: 50px;
color: #777777;
background: #fff;
text-decoration: none;
border-bottom: 1px solid #51a9f18c;
}
 
.menu_nva a:hover {
text-decoration: none;
}
</style>
</head>
 
 
 
<body  background="123.jpg">
 
<!-- html  start-->
 
<div id="firstpaneDiv" class="menu_list">
<h3 class="menu_head current">学习课程</h3>
<div style="display:block" class="menu_nva">
</div>
<h3 class="menu_head">JAVAWeb编程技术</h3>
<div style="display:none" class="menu_nva">
<a href="https://www.w3school.com.cn/html/index.asp">HTML和XML</a>
<a href="https://www.w3school.com.cn/html/html_css.asp">CSS</a>
<a href="https://www.w3school.com.cn/js/index.asp">Jave Script</a>
<a href="https://www.w3school.com.cn/html/html5_intro.asp">HTML5</a>
</div>
<h3 class="menu_head">物联网通信技术</h3>
<div style="display:none" class="menu_nva">
<a href="#">数据通信基础</a>
<a href="#">短距离通信技术</a>
<a href="#">无线传感器网络</a>
<a href="#">通信网及其交换技术</a>
</div><h3 class="menu_head">楼宇智能化技术</h3>
<div style="display:none" class="menu_nva">
<a href="#">智能楼宇信息</a>
</div><h3 class="menu_head">IT项目管理</h3>
<div style="display:none" class="menu_nva">
<a href="#">IT项目管理概述</a>

</div>
 
<!-- html  end-->
 
<!-- script  代码-->
 
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#firstpaneDiv .menu_nva:eq(0)").show();
$("#firstpaneDiv h3.menu_head").click(function(){
$(this).addClass("current").next("div.menu_nva").slideToggle(200).siblings("div.menu_nva").slideUp("slow");
$(this).siblings().removeClass("current");
});
$("#secondpane .menu_nva:eq(0)").show();
$("#secondpane h3.menu_head").mouseover(function(){
$(this).addClass("current").next("div.menu_nva").slideDown(400).siblings("div.menu_nva").slideUp("slow");
$(this).siblings().removeClass("current");
});
});
</script>
</body>
 
</html>
